<template>
  <view class="category-pages" :class="themeName" :style="[pageStyle]">
    <view v-for="(item, index) in pagesData" :key="index" :class="[item.name]">
      <template v-if="item.name == 'search'">
        <w-search
          v-show="item.show"
          :content="item.content"
          :styles="item.styles"
        />
      </template>
      <template v-if="item.name == 'category'">
        <w-category
          class="category"
          v-show="item.show"
          :content="item.content"
          :styles="item.styles"
          :height="height"
        />
      </template>
    </view>
    <view class="tabbar">
      <tabbar />
    </view>
  </view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import { apiGetPage } from "@/api/store";
import { apiGoodsCategory, apiGoodsLists } from "@/api/goods";
import { getRect } from "@/utils/tools";
import { mapGetters, mapState } from "vuex";
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      styles: {},
      pagesData: [],
      height: 0,
      goodsList: [],
      title: "",
    };
  },
  onLoad() {
    apiGetPage({
      type: 2,
    }).then((res) => {
      const {
        common: { title },
        common,
        content,
      } = res;
      uni.setNavigationBarTitle({
        title,
      });
      this.styles = common;
      console.log(content.data);
      this.pagesData = content;
      this.$nextTick(() => {
        this.getHeight();
      });
    });
  },
  onShareAppMessage() {
    const { code } = this.userInfo;

    const share = {
      path: `/pages/category/category?invite_code=${code}`,
    };
    return share;
  },
  computed: {
    ...mapGetters(["userInfo"]),

    pageStyle() {
      const { background_color, background_image, background_type } =
        this.styles;
      if (background_type == 0 || !background_image || !background_color) {
        return;
      }
      const style =
        background_type == 1
          ? {
              "background-color": background_color,
            }
          : {
              "background-image": `url(${background_image})`,
            };
      return style;
    },
  },
  methods: {
    async getHeight() {
      const category = await getRect(".category");
      this.height = category.height;
    },
    upCallback(page) {
      const pageNum = page.num;
      const pageSize = page.size;

      apiGoodsLists({
        page_no: pageNum,
        page_size: pageSize,
      })
        .then(({ lists, page_size, count }) => {
          // 如果是第一页需手动置空列表
          if (page.num == 1) this.goodsList = [];
          // 重置列表数据
          this.goodsList = [...this.goodsList, ...lists];
          this.mescroll.endBySize(page_size, count);
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
  }, // 使用mixin (在main.js注册全局组件)
};
</script>

<style lang="scss">
/*根元素需要有固定的高度*/
page {
  height: 100%;
  box-sizing: border-box;
  // 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
  /* #ifdef MP-ALIPAY || MP-DINGTALK*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* #endif */
  /*需给父元素设置height:100%*/
  .category-pages {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: 100% auto;

    /* 中间 */
    .category {
      flex: 1;
      min-width: 0;
      min-height: 0;
      /* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
